<!--
* description: 多类型搜索选择（含弹窗）
* author: wangml
* createdDate: 2019-12-20
-->

<template>
  <section class="multipSearch">
    <el-col :span="span">
      <lableName
        :cur-label-name="curLabelName"
        :is-show-label="isShowLabel"
        :is-require="isRequire"
      />
      <el-input
        v-model="modelCode"
        :placeholder="placeholder"
        size="small"
        suffix-icon="el-icon-s-unfold"
        clearable
        :disabled="disabled"
        :readonly="read"
        @blur="sendCode"
        @focus="getFocusCode"
        @clear="clearCode"
      />
      <validateFormate
        :cur-label-name="curLabelName"
        :validrule="validrule"
      />
    </el-col>
    <multiple-dialog
      :key="curPopupsKey"
      ref="multipleDialog"
      :popups-visible.sync="curPopupsVisible"
      :code-field="codeField"
      :com-type="comType"
      :title="curLabelName"
      :popups-key="popupsKey"
      :code="modelCode"
      :text="modelText"
      :value-object="dataToObject"
      :is-mul="isMul"
      @changeCode="getComponentCode"
    />
  </section>
</template>
<script>
import { searchInputMixins } from '@/components/mixins/searchInputMixins'
import { valueObjectMixins } from '@/components/mixins/valueObjectMixins'
import multipleDialog from './multipleDialog'
export default {
  name: 'MultipleSearchInput',
  components: {
    multipleDialog,
    lableName: () => import('@/components/lableName'), // 标题溢出样式组件
    validateFormate: () => import('@/components/validateFormate') // 校验提示样式组件
  },
  // 组件混入对象
  mixins: [searchInputMixins, valueObjectMixins],
  data() {
    return {
      read: false,
      editPageClassName: 't',
      editEl: null,
      curPopupsVisible: false,
      placeholder: `选择${this.labelName.substring(0, this.labelName.length - 1)}`,
      curLabelName: this.labelName
    }
  },
  watch: {
    modelCode(val) {
      if (this.dataToObject.returnField.prop.length > 1) {
        this.modelText = this.modelText[this.dataToObject.returnField.prop[1]]
      } else {
        this.modelText = this.modelCode
      }
      this.$emit('changeCode', this.modelCode, this.modelText, this.codeField, this.comType, this.popupsKey, this.textField, null, null)
    },
    curPopupsVisible(val) { this.read = val }
  },
  methods: {
    getFocusCode() {
      this.curPopupsVisible = true
      this.$nextTick(() => {
        if (this.dataToObject.listQuery && this.dataToObject.listQuery !== '') {
          var obj = {}
          obj['dlrId'] = this.$parent.$parent.$parent.formField['jfdNewId']
          obj['warehouseId' ] = 5
          Object.assign(this.$refs['multipleDialog'].formField, obj)
        }
        // 加载dialog中的数据
        this.$refs['multipleDialog'].queryTable(1)
      })
    }

  }
}
</script>
